<template>
  <div class="risk-container" v-title data-title="外部标准库">
    <a-back-top></a-back-top>
    <index-header headLine="外部标准库" subHeadLine=""></index-header>
    <div
      class="content"
      v-infinite-scroll="handleInfiniteOnLoad"
      :infinite-scroll-disabled="busy"
      :infinite-scroll-distance="20"
    >
      <section>
        <div class="head-line">
          <span><i></i>文件分类</span>
          <a-input-search
            placeholder="请输入标准名称,标准编号,关键字查询"
            v-model="ipagination.allSearch"
            :allowClear="true"
            @search="onSearch"
          >
            <a-button slot="enterButton" type="primary" icon="search">检索</a-button>
          </a-input-search>
        </div>
        <div class="flex tab-line tab-head-line" v-if="treeData[0]">
          <div :class="{ active: activeTab == parentId || !activeTab }" @click="onMenuSelectClass()">全部</div>
          <div
            v-for="(item, index) in treeData[0].children"
            :key="index"
            @click="onMenuSelectClass([item.key])"
            :class="{ active: activeTab == item.key }"
          >
            {{ item.label }}
          </div>
        </div>
        <div  style="margin-top: 30px" class="flex tab-line tab-head-line" >
          <div class="projec-class-lable">关键词:</div>
            <div :class="{ active: !ipagination.keywords }" @click="keywordSearch('keywords', null)">全部</div>
            <div
                    v-for="item in standardKeyword"
                    :key="item.dictValue"
                    :class="{ active: item.dictLabel == ipagination.keywords }"
                    @click="keywordSearch('keywords', item.dictLabel)"
            >
              {{ item.dictLabel }}
            </div>
        </div>


        <div  style="margin-top: 30px" class="flex tab-line tab-head-line" >
          <div class="projec-class-lable">签收状态:</div>
            <div :class="{ active: !ipagination.signFlag }" @click="handleSignFlag(ipagination.signFlag, '')">
              全部({{signCountResul.allCollect}})
            </div>
            <div :class="{ active: ipagination.signFlag == 2 }" @click="handleSignFlag(ipagination.signFlag, 2)">
              未签收({{signCountResul.unSign}})
            </div>
            <div :class="{ active: ipagination.signFlag == 1 }" @click="handleSignFlag(ipagination.signFlag, 1)">
              已签收({{signCountResul.sign}})
            </div>
            <div
                    :class="{ active: ipagination.myCollectFlag == 1 }"
                    @click="handleMyCollect(ipagination.myCollectFlag)"
            >
              已收藏({{signCountResul.collect}})
            </div>
        </div>


      </section>
      <template>
        <section class="condition-box nav-tap-box" :class="{ 'nav-tap-hidden': showMore }">
          <div class="condition-list trademark-nav">
            <div class="projec-class-box clearFix projec-class-input " style="border-bottom:1px solid #f2f2f2">
              <div>
                <div class="projec-class-lable" style="float:left">发布日期：</div>
                <ul class="projec-class-list clearFix">
                  <li
                    :class="['hoverShow', { clickShow: !ipagination.publishDate || ipagination.publishDate == '' }]"
                    @click="handleFlag('publishDate', '')"
                  >
                    全部
                  </li>
                  <li :class="['input-li', { 'input-li-active': !!ipagination.publishDate }]">
                    <a-date-picker
                      v-model="ipagination.publishDate"
                      placeholder="发布日期"
                      @change="enterSearch"
                       valueFormat="YYYY-MM-DD"
                    />
                  </li>
                </ul>
              </div>
              <div>
                <div class="projec-class-lable" style="float:left">实施日期：</div>
                <ul class="projec-class-list clearFix">
                  <li
                    :class="['hoverShow', { clickShow: !ipagination.issuedDate || ipagination.issuedDate == '' }]"
                    @click="handleFlag('punishMonth', '')"
                  >
                    全部
                  </li>
                  <li :class="['input-li', { 'input-li-active': !!ipagination.issuedDate }]">
                    <a-date-picker
                      v-model="ipagination.issuedDate"
                      placeholder="实施日期"
                      @change="enterSearch"
                       valueFormat="YYYY-MM-DD"
                    />
                  </li>
                </ul>
              </div>
                 <div>
                <div class="projec-class-lable" style="float:left">废止日期：</div>
                <ul class="projec-class-list clearFix">
                  <li
                    :class="['hoverShow', { clickShow: !ipagination.abolishTime || ipagination.abolishTime == '' }]"
                    @click="handleFlag('abolishTime', '')"
                  >
                    全部
                  </li>
                  <li :class="['input-li', { 'input-li-active': !!ipagination.abolishTime }]">
                    <a-date-picker
                      v-model="ipagination.abolishTime"
                      placeholder="废止日期"
                      valueFormat="YYYY-MM-DD"
                      @change="enterSearch"
                    />
                  </li>
                </ul>
              </div>
            </div>
            <div class="projec-class-box clearFix projec-class-input " style="border-bottom:1px solid #f2f2f2">
              <div>
                <div class="projec-class-lable" style="float:left">是否强制：</div>
                <ul class="projec-class-list clearFix">
                  <li
                    :class="['hoverShow', { clickShow: !ipagination.forceFlag || ipagination.forceFlag == '' }]"
                    @click="handleFlag('forceFlag', '')"
                  >
                    全部
                  </li>
                  <li :class="['input-li', { 'input-li-active': !!ipagination.forceFlag }]">
                    <a-select v-model="ipagination.forceFlag" @change="enterSearch" allowClear>
                        <a-select-option value="1">
                          是
                        </a-select-option>
                        <a-select-option value="0">
                          否
                        </a-select-option>
                     </a-select>
                  </li>

                </ul>
              </div>
              <div>
                <div class="projec-class-lable" style="float:left">适用地区：</div>

                <ul class="projec-class-list clearFix">
                  <li
                    :class="[
                      'hoverShow',
                      { clickShow: !ipagination.country || ipagination.country == '' }
                    ]"
                    @click="handleFlag('country', '')"
                  >
                    全部
                  </li>
                  <li :class="['input-li', { 'input-li-active': !!ipagination.country }]">
                    <a-input v-model="ipagination.country" @pressEnter="enterSearch" @change="enterSearch" allowClear/>
                  </li>
                </ul>
              </div>
                <div>
                <div class="projec-class-lable" style="float:left">业务类型：</div>
                <ul class="projec-class-list clearFix">
                  <li
                    :class="['hoverShow', { clickShow: !ipagination.bussinessType || ipagination.bussinessType == '' }]"
                    @click="handleFlag('bussinessType', '')"
                  >
                    全部
                  </li>
                   <li :class="['input-li', { 'input-li-active': !!ipagination.bussinessType }]">
                    <a-select v-model="ipagination.bussinessType" @change="enterSearch" allowClear>
                      <a-select-option
                        v-for="(item, index) in busTypeOption"
                        :key="'prodSource' + index"
                        :value="item"
                      >
                        {{ item }}
                      </a-select-option>
                    </a-select>
                  </li>
                </ul>
              </div>
            </div>
            <div class="projec-class-box clearFix projec-class-input " style="border-bottom:1px solid #f2f2f2">

                <div>
                <div class="projec-class-lable" style="float:left">产品类别：</div>
                <ul class="projec-class-list clearFix">
                  <li
                    :class="['hoverShow', { clickShow: !ipagination.foodCategory || ipagination.foodCategory == '' }]"
                    @click="handleFlag('foodCategory', '')"
                  >
                    全部
                  </li>
                   <li :class="['input-li', { 'input-li-active': !!ipagination.foodCategory }]">

                    <a-tree-select
                  v-model="ipagination.foodCategory"
                  @change="enterSearch"
                  :tree-data="foodTypeData"
                  placeholder="请选择产品类别"
                  :replaceFields="{ children: 'children', title: 'fname', key: 'fcode', value: 'fname' }"
                  :treeDefaultExpandedKeys="['ZG01']"
                  allowClear
                >
                </a-tree-select>
                  </li>
                </ul>
              </div>
            </div>
<!--            <div class="condition-item">-->
<!--              <div class="condition-label">关键词:</div>-->
<!--              <div class="condition-value tab-line">-->
<!--                <div :class="{ active: !ipagination.keywords }" @click="keywordSearch('keywords', null)">全部</div>-->
<!--                <div-->
<!--                  v-for="item in standardKeyword"-->
<!--                  :key="item.dictValue"-->
<!--                  :class="{ active: item == ipagination.keywords }"-->
<!--                  @click="keywordSearch('keywords', item.dictLabel)"-->
<!--                >-->
<!--                  {{ item.dictLabel }}-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
            <div class="condition-item">
              <div class="condition-label">标准状态:</div>
              <div class="condition-value tab-line">
                <div
                  v-for="item in issuedOption"
                  :key="item.label"
                  :class="{ active: item.value == ipagination.issuedStatus }"
                  @click="keywordSearch('issuedStatus', item.value)"
                >
                  {{ item.label }}
                </div>
              </div>
            </div>
<!--            <div class="condition-item">-->
<!--              <div class="condition-label">签收状态:</div>-->
<!--              <div class="condition-value tab-line">-->

<!--                <div :class="{ active: !ipagination.signFlag }" @click="handleSignFlag(ipagination.signFlag, '')">-->
<!--                  全部({{signCountResul.allCollect}})-->
<!--                </div>-->
<!--                <div :class="{ active: ipagination.signFlag == 2 }" @click="handleSignFlag(ipagination.signFlag, 2)">-->
<!--                  未签收({{signCountResul.unSign}})-->
<!--                </div>-->
<!--                <div :class="{ active: ipagination.signFlag == 1 }" @click="handleSignFlag(ipagination.signFlag, 1)">-->
<!--                  已签收({{signCountResul.sign}})-->
<!--                </div>-->
<!--                <div-->
<!--                  :class="{ active: ipagination.myCollectFlag == 1 }"-->
<!--                  @click="handleMyCollect(ipagination.myCollectFlag)"-->
<!--                >-->
<!--                  已收藏({{signCountResul.collect}})-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

            <div class="condition-item">
              <div class="condition-label">标签:</div>
              <div class="condition-value tab-line">
                <div :class="{ active: ipagination.isTab == 0 }" @click="handleTab(ipagination.isTab, 0)">
                  全部
                </div>
                <div :class="{ active: ipagination.isTab == 1 }" @click="handleTab(ipagination.isTab, 1)">
                  已数字化
                </div>
                <div :class="{ active: ipagination.isTab == 2 }" @click="handleTab(ipagination.isTab, 2)">
                  爬虫入库
                </div>
              </div>
            </div>
          </div>

        </section>
        <div class="nav-tap-btn">
          <span @click="showMore = !showMore"
            >{{ !showMore ? '收起' : '展开' }}筛选
            <a-icon :class="['icon-child-down', { 'icon-child-up': showMore }]" slot="suffixIcon" type="caret-up" />
          </span>
        </div>

      </template>
      <!-- 排序 -->
         <SortTag :sortTags="sortTags" @sortChange="sortChange"></SortTag>
      <section class="pd0 mg0">
        <div class="data-main" :class="{ shrinkage: shrinkageFlag }">
          <div class="box-left">
            <div class="tree-title">
              <span class="bold">目录</span>
              <a-icon
                type="menu-fold"
                @click="shrinkageFlag = !shrinkageFlag"
                :title="!shrinkageFlag ? '收缩目录' : '展开目录'"
              />
            </div>
            <div class="tree" v-if="!shrinkageFlag">
              <a-tree
                v-if="treeShowData.length"
                :tree-data="treeShowData"
                :selectedKeys="treeSelectedKeys"
                :expandedKeys="treeExpandedKeys"
                @select="onSelectClass"
                @change="getFileTypeName"
                @expand="handleTreeExpand"
                :show-line="true"
              />
            </div>
          </div>
          <div class="box-right">
            <div class="flex align-center justify-between">
              <div class="main-top">
                <a-button icon="star" @click="handleCollect"> 收藏 </a-button>
                <a-button icon="export" v-has-permi="['reptileLib:outstandard']"  @click="handleExportExcel">导出</a-button>
                <a-button @click="handleAllFile" v-if="ipagination.myFlag == 1 || ipagination.myFlag == 2"
                  >共享给我的</a-button
                >
                <a-button
                  @click="handleMyFile"
                  v-if="ipagination.myFlag == 1 || ipagination.myFlag == 2"
                  :type="ipagination.myFlag == 1 ? 'primary' : ''"
                  >我起草的文档</a-button
                >
                <a-button
                  @click="handleMyManagerFile"
                  v-if="ipagination.myFlag == 1 || ipagination.myFlag == 2"
                  :type="ipagination.myFlag == 2 ? 'primary' : ''"
                  >我管理的文档</a-button
                >
                <a-button icon="delete" @click="handleDelete" v-if="ipagination.myFlag == 1" type="danger"
                  >删除</a-button
                >
              </div>
              <div class="list-or-card">
                <span v-if="ipagination.total">(总共{{ ipagination.total }}条记录)</span>
                <div :class="{ active: typeFlag === 'list' }" @click="typeFlag = 'list'">
                  <a-icon type="bars" />列表
                </div>
                <div :class="{ active: typeFlag === 'card' }" @click="typeFlag = 'card'">
                  <a-icon type="appstore" />卡片
                </div>
              </div>
            </div>
            <div class="main-table">
              <a-spin :spinning="loading" size="large" class="fixed-spin">
                <ul class="project-list" v-if="typeFlag === 'list'">
                  <li v-for="(item, index) in fileList" :key="index" class="risk-list-hover">
                    <div>
                      <h3 @click="handleViewFile(item)">
                        <span class="text-hidden list-title" :title="item.fileNo + ' ' + item.fileName">
                          {{ item.fileNo }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.fileName }}
                        </span>
                        <span v-if="ipagination.myFlag == 1 || ipagination.myFlag == 2" class="status status0">
                          <span v-if="item.state <= 1">起草中</span>
                          <span v-if="item.state === 2">已发布</span>
                          <span v-if="item.state === 3">审批中</span>
                          <span v-if="item.state === 4">改版中</span>
                          <span v-if="item.state === 5">已废止</span>
                          <span v-if="item.state === 6">审批通过</span>
                          <span type="success" v-if="item.state === 8">已回退</span>
                        </span>
                        <span
                          class="status status1"
                          v-if="issuedFilter(item.issuedDate, item.abolishTime) === '即将实施'"
                          >即将实施</span
                        >
                        <span
                          class="status status2"
                          v-if="issuedFilter(item.issuedDate, item.abolishTime) === '现行有效'"
                          >现行有效</span
                        >
                        <span
                          class="status status3"
                          v-if="issuedFilter(item.issuedDate, item.abolishTime) === '即将废止'"
                          >即将废止</span
                        >
                        <span class="status status4" v-if="issuedFilter(item.issuedDate, item.abolishTime) === '已废止'"
                          >已废止</span
                        >
                        <span style="margin-left: 5px" v-if="item.isFromReptile == 1 " class="status status5">
                          <span >爬虫入库</span>
                        </span>
                        <span style="margin-left: 5px"  v-if="item.digitId" class="status status6">
                          <span >已数字化</span>
                        </span>
                      </h3>
                      <div>
                        <span>创建日期：{{ item.createTime || '--' }}</span>
                        <span>发布日期：{{ item.publishDate || '--' }}</span>
                        <span>实施日期：{{ item.issuedDate || '--' }}</span>
                      </div>
                    </div>
                    <div>
                      <div class="line-bar-box">
                        <span
                          ><a-icon type="tags" theme="filled" />
                          <span>{{ getTreeParent(item.fileType, item.fileTypeName) }}</span>
                        </span>
                        <span
                          >是否强制：<span>{{
                            item.forceFlag == '1' || item.forceFlag == '是' ? '是' : '否'
                          }}</span></span
                        >
                        <span v-if="ipagination.myFlag == 2"
                          >起草人：<span>{{ item.createUser }}</span></span
                        >
                        <span v-if="ipagination.myFlag == 1 || ipagination.myFlag == 2"
                          ><span>创建时间：{{ item.createTime }}</span></span
                        >
                        <span v-if="ipagination.myFlag == 2"
                          ><span>创建部门：{{ item.addDept }}</span></span
                        >
                      </div>
                      <div class="tip-span line-bar-box flex align-center justify-end">
                        <span @click="handleShowLog(1, item)">
                          <a-icon type="eye" theme="filled" />
                          <span>浏览{{ item.readN || '0' }}</span>
                        </span>
                        <span @click="handleShowLog(3, item)">
                          <a-icon type="star" theme="filled" /><span>收藏{{ item.collectN || '0' }}</span>
                        </span>
                        <span @click="handleShowLog(2, item)">
                          <a-icon type="download" /><span>下载{{ item.downloadN || '0' }}</span>
                        </span>
                        <a-checkbox
                          :value="item.id"
                          @change="checkBoxChange"
                          :checked="selectedRowKeys.indexOf(item.id) >= 0"
                        ></a-checkbox>
                      </div>
                    </div>
                    <span class="status-box" v-if="checkIsNew(item.createTime)">
                      NEW
                    </span>
                  </li>
                </ul>
                <ul class="project-card" v-else>
                  <li v-for="(item, index) in fileList" :key="index" class="risk-list-hover">
                    <div class="synopsis">
                      <h3 @click="handleViewFile(item)">
                        <span class="text-hidden" :title="item.fileNo + ' ' + item.fileName">
                          {{ item.fileNo }}&nbsp;&nbsp;{{ item.fileName }}</span
                        >
                        <span class="status status0" v-if="ipagination.myFlag == 1 || ipagination.myFlag == 2">
                          <span v-if="item.state<=1">起草中</span>
                          <span v-if="item.state===2">已发布</span>
                          <span  v-if="item.state===3">审批中</span>
                          <span v-if="item.state===4">改版中</span>
                          <span v-if="item.state===5">已废止</span>
                          <span v-if="item.state==6 ">审批通过</span>
                          <span v-if="item.state == 8">已回退</span>
                        </span>
                        <span
                          class="status status1"
                          v-if="issuedFilter(item.issuedDate, item.abolishTime) === '即将实施'"
                          >即将实施</span
                        >
                        <span
                          class="status status2"
                          v-if="issuedFilter(item.issuedDate, item.abolishTime) === '现行有效'"
                          >现行有效</span
                        >
                        <span
                          class="status status3"
                          v-if="issuedFilter(item.issuedDate, item.abolishTime) === '即将废止'"
                          >即将废止</span
                        >
                        <span class="status status4" v-if="issuedFilter(item.issuedDate, item.abolishTime) === '已废止'"
                          >已废止</span
                        >
                        <span style="margin-left: 5px" v-if="item.isFromReptile == 1" class="status status5">
                          <span >爬虫入库</span>
                        </span>
                        <span style="margin-left: 5px"  v-if="item.digitId" class="status status6">
                          <span >已数字化</span>
                        </span>
                      </h3>
                      <div class="line-bar-box">
                        <p>
                          <span>创建日期</span>
                          <span>{{ item.createTime || '--' }}</span>
                        </p>
                        <p>
                          <span>发布日期</span>
                          <span>{{ item.publishDate || '--' }}</span>
                        </p>
                        <p>
                          <span>实施日期</span>
                          <span>{{ item.issuedDate || '--' }}</span>
                        </p>
                        <p v-if="ipagination.myFlag == 2">
                          <span>起草人</span>
                          <span>{{ item.createUser }}</span>
                        </p>
                        <p v-if="ipagination.myFlag == 2">
                          <span>创建部门</span>
                          <span>{{ item.addDept }}</span>
                        </p>
                        <p v-if="ipagination.myFlag == 1 || ipagination.myFlag == 2">
                          <span>创建时间</span>
                          <span>{{ item.createTime || '--' }}</span>
                        </p>
                        <p>
                          <span>是否强制</span>
                          <span>{{ item.forceFlag == '1' || item.forceFlag == '是' ? '是' : '否' }}</span>
                        </p>
                        <p>
                          <span>标准目录</span>
                          <span :title="getTreeParent(item.fileType, item.fileTypeName)">{{
                            getTreeParent(item.fileType, item.fileTypeName)
                          }}</span>
                        </p>
                      </div>
                    </div>
                    <div class="table_right flex align-center justify-between">
                      <div class="tip-span line-bar-box">
                        <span @click="handleShowLog(1, item)" title="浏览">
                          <a-icon type="eye" theme="filled" /><span>{{ item.readN || '0' }}</span>
                        </span>
                        <span @click="handleShowLog(3, item)" title="收藏">
                          <a-icon type="star" theme="filled" /><span>{{ item.collectN || '0' }}</span>
                        </span>
                        <span @click="handleShowLog(2, item)" title="下载">
                          <a-icon type="download" /><span>{{ item.downloadN || '0' }}</span>
                        </span>
                      </div>
                      <a-checkbox
                        :value="item.id"
                        @change="checkBoxChange"
                        :checked="selectedRowKeys.indexOf(item.id) >= 0"
                      ></a-checkbox>
                    </div>
                    <div class="status-box" v-if="checkIsNew(item.createTime)">
                      NEW
                    </div>
                  </li>
                </ul>
                <div class="tips-box" v-if="fileList.length == ipagination.total && fileList.length > 0">
                  暂无更多数据
                </div>
              </a-spin>
              <a-empty v-if="fileList.length == 0" description="暂无数据" />
            </div>
          </div>
          <template>
            <fixed-menu v-has-permi="['reptileLib:outstandard']" >
              <div class="functionMould" @click="handleNewFile">
                <span><a-icon type="file-add" class="menu-icon"/></span>
                <span> 新建文档</span>
              </div>
              <div class="functionMould" @click="handleMyFile">
                <span><a-icon type="file-text" class="menu-icon"/></span>
                <span> 我的文档</span>
              </div>
              <div class="functionMould" @click="handleGroup">
                <span><a-icon type="lock" class="menu-icon"/></span>
                <span>私有组</span>
              </div>
              <div class="functionMould" @click="handleFileClass">
                <span><a-icon type="hdd" class="menu-icon"/></span>
                <span>文件大类管理</span>
              </div>
              <div class="functionMould" @click="handleBatchFile">
                <span><a-icon type="import" class="menu-icon"/></span>
                <span>批量上传</span>
              </div>
            </fixed-menu>
          </template>
        </div>
      </section>
    </div>
    <index-lib-log-modal ref="logModal" :busType="4" />
  </div>
</template>

<script>
import { getRiskAction } from '@/api/manage';
import FixedMenu from '@/views/components/fixedMenu';
import IndexLibLogModal from '@/views/library/modules/RiskIndexLibLogModal';
import * as localStorage from '@/utils/localStorage';
import * as RequestHost from '@/api/env';
import { mapActions } from 'vuex';
import indexHeader from '@/views/components/indexHeader';
import SortTag from '@/components/tools/SortTag';
export default {
  name: 'HteIndexStandard',
  components: {
    IndexLibLogModal,
    indexHeader,
    FixedMenu,
    SortTag,
  },

  filters: {
    issuedFilter(str1, str2) {
      const now = new Date();
      const issuedDate = new Date(str1);
      if (issuedDate.getTime() > now.getTime()) {
        return '即将实施';
      } else if (!str2) {
        return '现行有效';
      } else {
        const abolishTime = new Date(str2);
        if (abolishTime.getTime() > now.getTime()) {
          return '即将废止';
        } else {
          return '已废止';
        }
      }
    }
  },
  data() {
    return {
       sortTags:[{tag:'标准编号',filed:'t.file_no',asc:false}
      ,{tag:'标准名称',filed:'t.file_name',asc:false}
      ,{tag:'创建日期',filed:'t.create_time',asc:false}
      ,{tag:'发布日期',filed:'t.publish_date',asc:false}
       ,{tag:'实施日期',filed:'t.issued_date',asc:false}
      ,{tag:'浏览量',filed:'t.readNum',asc:false}
      ,{tag:'收藏量',filed:'t.collect',asc:false}
      ],
      searchForm: {},
      columns: [],

      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条';
        },
        fileType: 0,
        total: 0,
        myFlag: 0,
        myCollectFlag: 0,
        signFlag: '' ,
        isTab:0 ,
      },
      loading: false,
      treeData: [],
      treeShowData: [],
      treeNodeData: {},
      // replaceFields: {
      //   children: 'children',
      //   title: 'name',
      //   key: 'id',
      // },
      fileList: [],
      selectedRowKeys: [],
      treeSelectedKeys: [],
      treeExpandedKeys: [],
      url: {
        list: '/lib/hteLibFile/list',
        getTreeList: '/lib/hteFileClass/getTreeList',
        queryById: '/lib/hteFileClass/queryById',
        collectOperate: '/lib/hteLibLog/collect',
        statis: '/lib/hteLibLog/statis',
        issuedStatis: '/lib/hteLibFile/issuedStatis/',
        deleteBatch: '/lib/hteLibFile/deleteBatch',
        foodCategoryTree:'/api/standardDigit/foodCategoryTree',
        getSignCount:'/lib/hteLibFile/getSignCount',
        sysDict:'/sysDictData/list'
      },
      parentId: 4,
      classId: 4,
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'home',
        badgecount: ''
      },
      standardKeyword: [],
      issuedOption: [
        { label: '全部', value: null },
        { label: '即将实施', value: 1 },
        { label: '现行有效', value: 2 },
        { label: '即将废止', value: 3 },
        { label: '已废止', value: 4 }
      ],
      userName: '',
      showMore: true, // 收起筛选
      shrinkageFlag: true, // 收起菜单
      typeFlag: 'list', // 列表卡片
      activeTab: this.classId,
      fileTypeName:undefined ,
      busy: false,
      busTypeOption: ['产品质量', '原料质量', '包装质量', '检验方法', '空白'],
       foodTypeData: [],
       signCountResul:{},
    };
  },
  mounted() {
    this.classId = this.parentId;
    this.fetchClassTree();
    this.fetchFileList();
    this.fetchDict();
    this.userName = localStorage.getStore('userName');
  },
  methods: {
    ...mapActions({
      companyCodeQry: 'companyCodeQry'
    }),
     enterSearch() {
      this.ipagination.current = 1;
      this.fetchFileList();
    },
     handleFlag(flag, val) {
      this.ipagination.current = 1;
      this.treeSelectedKeys = [parseInt(this.parentId)];
      this.$set(this.ipagination, flag, val);
      this.ipagination.fileType = this.parentId;
      this.fetchFileList();
    },
    getSignCount(){
      getRiskAction(this.url.getSignCount,{
         fileType:this.parentId
      }).then(res=>{

        if(res.code == 0){
          this.signCountResul = res.data
        }
      })
    },

    sortChange(orderStr,orderItems){
      this.ipagination.orderStr = orderStr;
      this.ipagination.current = 1;
      this.fetchFileList();
    },
    /**
     * 头部查询方法
     */
    onSearch() {
      this.ipagination.current = 1;
      this.fetchFileList();
    },
    /**
     * 选择树节点，切换列表数据
     */
    onSelectClass(selectedKeys) {
      this.activeTab = selectedKeys;
      this.classId = selectedKeys[0];
      this.ipagination.fileType = selectedKeys[0];
      this.treeSelectedKeys = selectedKeys;
      // this.treeExpandedKeys = selectedKeys
      this.fetchFileList();
    },
    onMenuSelectClass(selectedKeys) {
      if (selectedKeys != this.activeTab) {
        this.ipagination.keywords = null; // 切换时，清空关键字
      }
      this.activeTab = selectedKeys;
      this.ipagination.current = 1;
      if (!selectedKeys) {
        this.treeSelectedKeys = [parseInt(this.parentId)];
        this.classId = this.parentId;
        this.fetchClassTree();
        this.fetchFileList();
        this.fetchDict();
        return;
      }
      this.classId = selectedKeys[0];
      this.ipagination.fileType = selectedKeys[0];
      this.treeSelectedKeys = selectedKeys;
      // this.treeExpandedKeys = selectedKeys
      const index = this.treeData[0].children.findIndex(v => v.key === selectedKeys[0]);
      this.treeShowData[0] = this.treeData[0].children[index];
      console.log(JSON.stringify(this.treeShowData[0]));
      this.fetchFileList();
      this.treeExpandedKeys = [];
      this.treeExpandedKeys.push(this.treeShowData[0].key);
    },
    fetchDict() {
      const that = this;
      this.getSignCount()
       getRiskAction(this.url.foodCategoryTree, {}).then(res => {
        if (res.code == 0) {
          that.foodTypeData = res.data;
        } else {
          this.$message.error('获取食品分类数据错误');
        }
      });

      getRiskAction(this.url.sysDict, { dictType: 'outstand_keyword' }).then(res => {
        if (res.code == 0) {
          debugger
          that.standardKeyword = res.data;
        } else {
          this.$message.error('获取关键词数据出错:' + res.msg);
        }
      });

      that.issuedOption.forEach(item => {
        item.label = item.label.split('(')[0];
      });
      getRiskAction(this.url.issuedStatis + that.parentId, {}).then(res => {
        if (res.code == 0) {
          that.issuedOption[1].label += '(' + res.data.issuedStatus1 + ')';
          that.issuedOption[2].label += '(' + res.data.issuedStatus2 + ')';
          that.issuedOption[3].label += '(' + res.data.issuedStatus3 + ')';
          that.issuedOption[4].label += '(' + res.data.issuedStatus4 + ')';

          const num =
            parseInt(res.data.issuedStatus1 || 0) +
            parseInt(res.data.issuedStatus2 || 0) +
            parseInt(res.data.issuedStatus3 || 0) +
            parseInt(res.data.issuedStatus4 || 0);
          that.issuedOption[0].label += '(' + num + ')';
        }
      });
    },
    /**
     * 滚动底部自动加载
     */
    handleInfiniteOnLoad() {
      this.busy = true;
      if (this.fileList.length >= this.ipagination.total || this.loading) {
        return;
      }
      this.ipagination.current += 1;
      this.fetchFileList(2);
    },
    /**
     * 加载用户的分类树
     */
    async fetchClassTree() {
      const that = this;
      getRiskAction(this.url.getTreeList, { parentId: that.classId }).then(res => {
        if (res.code == 0) {
          that.treeData = res.data.treeList;
          that.treeShowData = JSON.parse(JSON.stringify(that.treeData));
          that.treeShowData.forEach(it => {
            it.selectable = true;
          });
          that.treeSelectedKeys = [this.treeShowData[0].key];
          that.treeExpandedKeys = [];
          that.treeExpandedKeys.push(this.treeShowData[0].key);
          that.loops(that.treeData);
        } else {
          this.$message.error('获取分类树错误');
        }
      });
    },
    async fetchFileList(type) {
      this.selectedRowKeys = [];
      this.ipagination.pageNo = this.ipagination.current;
      this.loading = true;
      this.ipagination.fileType = this.classId;
      if (!type || type != 2) {
        this.ipagination.current = 1;
        this.ipagination.pageNo = 1;
      }
      let param = Object.assign({}, this.ipagination);
      delete param.showTotal;
      delete param.pageSizeOptions;
      this.$set(param , 'isTab' ,this.ipagination.isTab)

      param.classId = this.parentId;
      const that = this;
      getRiskAction(this.url.list, param)
        .then(res => {
          if (res.code == 0) {
            if (type === 2) {
              that.fileList.push(...res.data.records);
            } else {
              that.fileList = res.data.records;

              console.log("外部标准库", that.fileList)
            }
            that.busy = false;
            if (res.data.total) {
              that.ipagination.total = res.data.total;
            } else {
              that.ipagination.total = 0;
            }
            this.fileList.forEach(row => {
              getRiskAction(that.url.statis, { fileId: row.id, busType: 4 }).then(res2 => {
                if (res2.code == 0) {
                  that.$set(row, 'readN', res2.data.readN);
                  that.$set(row, 'collectN', res2.data.collectN);
                  that.$set(row, 'downloadN', res2.data.downloadN);
                }
              });
            });
          } else {
            that.$message.error('获取列表数据出错，请联系管理员');
            that.busy = true;
          }
          this.loading = false;
        })
        .catch(function(error) {
          that.loading = false;
          that.busy = true;
          that.$message.error('娅米token已过期或没有权限，请重新打开');
        });
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    handleCollect() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！');
        return;
      }
      var ids = '';
      for (var a = 0; a < this.selectedRowKeys.length; a++) {
        ids += this.selectedRowKeys[a] + ',';
      }
      const that = this;
      getRiskAction(that.url.collectOperate, { fileIds: ids, busType: 4 }).then(res => {
        if (res.code == 0) {
          that.$message.success(res.msg);
        } else {
          that.$message.warning(res.msg);
        }
      });
    },
    handleDelete() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！');
        return;
      }
      var ids = '';
      for (var a = 0; a < this.selectedRowKeys.length; a++) {
        ids += this.selectedRowKeys[a] + ',';
      }
      const that = this;
      getRiskAction(that.url.deleteBatch, { ids: ids }).then(res => {
        if (res.code == 0) {
          that.$message.success(res.msg);
          that.fetchFileList();
        } else {
          that.$message.warning(res.msg);
        }
      });
    },
    handleViewFile(row) {
      // this.$router.push('/library/file/info/' + row.id)
      // this.$router.push()
      // window.open('/library/file/info/' + row.id)
      if (this.ipagination.myFlag == 1 || this.ipagination.myFlag == 2) {
         let routeUrl
        if(row.state === 3  || row.state === 8 || row.state === 7 || row.state === 6){
          routeUrl = this.$router.resolve({
          path: '/library/file/view/' + this.parentId + '/' + row.id + '/' + row.version
          });
        }
        else{
          routeUrl = this.$router.resolve({
            path: '/library/file/edit/' + this.parentId + '/' + row.id + '/' + row.draftVersion
          });
        }

        window.open(routeUrl.href, '_blank');
      }
      else {
        let routeUrl = this.$router.resolve({
          path: '/library/file/view/' + this.parentId + '/' + row.id + '/' + row.version
        });
        window.open(routeUrl.href, '_blank');
      }
    },
    handleNewFile() {
      let routeUrl = this.$router.resolve({
        path: '/library/file/new/' + this.parentId
      });
      window.open(routeUrl.href, '_blank');
    },
    handleFileClass() {
      let routeUrl = this.$router.resolve({
        path: '/risk/fileClass/' + this.parentId
      });
      window.open(routeUrl.href, '_blank');
    },
    handleGroup() {
      let routeUrl = this.$router.resolve({
        path: '/risk/group'
      });
      window.open(routeUrl.href, '_blank');
    },
    handleBatchFile() {
      let routeUrl = this.$router.resolve({
        path: '/library/file/batch/' + this.parentId
      });
      window.open(routeUrl.href, '_blank');
    },
    handleAllFile() {
      this.ipagination.current = 1;
      this.treeSelectedKeys = [parseInt(this.parentId)];
      this.ipagination.myFlag = 0;
      this.ipagination.myCollectFlag = 0;
      this.ipagination.signFlag = 0;
      this.ipagination.fileType = this.parentId;
      this.fetchFileList();
    },
    checkIsNew(val) {
      var myDate = new Date();
      myDate.setMonth(myDate.getMonth() - 1);
      const dateRow = new Date(val);
      if (dateRow.getTime() > myDate.getTime()) {
        return true;
      } else {
        return false;
      }
    },
    handleMyManagerFile() {
      this.ipagination.current = 1;
      this.treeSelectedKeys = [parseInt(this.parentId)];
      this.ipagination.myFlag = 2;
      this.ipagination.myCollectFlag = 0;
      this.ipagination.signFlag = 0;
      this.ipagination.fileType = this.parentId;
      this.fetchFileList();
    },
    handleMyFile() {
      this.ipagination.current = 1;
      this.treeSelectedKeys = [parseInt(this.parentId)];
      this.ipagination.myFlag = 1;
      this.ipagination.myCollectFlag = 0;
      this.ipagination.signFlag = 0;
      this.ipagination.fileType = this.parentId;
      this.fetchFileList();
    },
    handleMyCollect(checked) {
      this.treeSelectedKeys = [parseInt(this.parentId)];
      this.ipagination.myFlag = 0;
      // if (!checked) {
      this.$set(this.ipagination, 'myCollectFlag', 1);
      // } else {
      //   this.$set(this.ipagination, 'myCollectFlag', null);
      // }
      this.ipagination.signFlag = 3;
      this.ipagination.fileType = this.parentId;
      this.ipagination.current = 1;
      this.fetchFileList();
    },
    handleSignFlag(checked, flag) {
      this.treeSelectedKeys = [parseInt(this.parentId)];
      this.ipagination.myFlag = 0;
      this.ipagination.myCollectFlag = 0;
      // if (flag) {
      //   this.$set(this.ipagination, 'signFlag', flag);
      // } else {
      //   this.$set(this.ipagination, 'signFlag', null);
      // }
      this.$set(this.ipagination, 'signFlag', flag);
      this.ipagination.fileType = this.parentId;
      this.ipagination.current = 1;
      this.fetchFileList();
    },


    handleTab(checked , tab){

      this.$set(this.ipagination, 'isTab', tab);
      this.ipagination.current = 1;
      this.fetchFileList();
    },
    handleShowLog(type, record) {
      this.$refs.logModal.showLog(type, record.id);
    },
    keywordSearch(kw, val) {
      debugger
      this.$set(this.ipagination, kw, val);
      this.ipagination.current = 1;
      this.fetchFileList();
    },
    issuedFilter(str1, str2) {
      const now = new Date();
      const issuedDate = new Date(str1);
      if (issuedDate.getTime() > now.getTime()) {
        return '即将实施';
      } else if (!str2) {
        return '现行有效';
      } else {
        const abolishTime = new Date(str2);
        if (abolishTime.getTime() > now.getTime()) {
          return '即将废止';
        } else {
          return '已废止';
        }
      }
    },
    handleExportExcel() {

      console.log('导出资讯' , this.ipagination.fileType )
      this.getFileTypeName();
    },
    getFileTypeName() {
      getRiskAction(this.url.queryById, {id: this.ipagination.fileType}).then(res => {
        if (res.code == 0) {
          let result = res.data;
          this.fileTypeName = result.name
          let url = '';
          debugger
          if (this.fileTypeName != undefined && '资讯' == this.fileTypeName) {
            url =
                    RequestHost.baseUrl +
                    '/riskchk/lib/hteLibFile/exportExcelNews?classId=' +
                    this.parentId +
                    '&Authorization=' +
                    encodeURI(encodeURI(localStorage.getStore('Authorization')));
            for (var p in this.ipagination) {
              if (p !== 'orders' && p != 'showTotal' && p != 'pageSizeOptions' && this.ipagination[p]) {
                url += '&' + p + '=' + this.ipagination[p];
              }
            }
          } else {
            url =
                    RequestHost.baseUrl +
                    '/riskchk/lib/hteLibFile/exportExcel?classId=' +
                    this.parentId +
                    '&Authorization=' +
                    encodeURI(encodeURI(localStorage.getStore('Authorization')));
            for (var p in this.ipagination) {
              if (p !== 'orders' && p != 'showTotal' && p != 'pageSizeOptions' && this.ipagination[p]) {
                url += '&' + p + '=' + this.ipagination[p];
              }
            }
          }
          window.location.href = url;
        }
      })
    },
    handleTreeExpand(expandedKeys) {
      this.treeExpandedKeys = expandedKeys;
    },
    getTreeParent(val, name) {
      let currentNode = this.treeNodeData[val];
      if (currentNode.parent) {
        return currentNode.parent.value + '—' + name;
      } else {
        return name;
      }
      //
      //获取父节点
      // const target = this.getNode(val);
      // // console.log(target);
      // let parentStr = '';
      // if (target && target.length > 1) {
      //   target.forEach((item, index) => {
      //     if (index > 0) {
      //       parentStr += item + '—';
      //     }
      //   });
      // }
      // if (parentStr != '') {
      //   parentStr = parentStr.substring(0, parentStr.length - 1);
      //   //只显示两级
      //   while (parentStr.split('—').length > 2) {
      //     parentStr = parentStr.substring(parentStr.indexOf('—') + 1);
      //   }
      // }
      // return parentStr;
    },
    loops(data = [], parent) {
      const that = this;
      return data.map(({ children, key: key, title: value }) => {
        const node = {
          key,
          value,
          parent
        };
        that.treeNodeData[key] = node;
        node.children = that.loops(children, node);
        return;
      });
    },
    getNode(value) {
      let node = [];
      let currentNode = this.treeNodeData[value];
      node.push(currentNode.value);
      if (currentNode.parent) {
        node = [...this.getNode(currentNode.parent.value), ...node];
      }
      return node;
    },
    checkBoxChange(e) {
      if (e.target.checked == true) {
        this.selectedRowKeys.push(e.target.value);
      } else {
        const idx = this.selectedRowKeys.findIndex(v => v === e.target.value);
        this.selectedRowKeys.splice(idx, 1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/styles/riskListOrCard.scss';

.projec-class-box {
  font-weight: 600;
  // background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  .projec-class-lable {
    width: 120px;
    padding: 10px 0 10px 30px;
    // float: left;
    font-size: 15px;
    text-align: left;
  }
  .projec-class-list {
    width: calc(100% - 120px);
    padding-left: 10px;
    color: rgba(0, 0, 0, 0.65);
    margin: 0;
    //  float: left;
    //  background: #fff;
    display: block;
    position: relative;
    padding: 0;
    list-style: none;
    li {
      float: left;
      padding: 10px 15px;
      &.input-li {
        padding: 7px 5px;
        ::v-deep input,
        ::v-deep .ant-select {
          line-height: 27px;
          height: 27px;
          position: relative;
          top: 2px;
          width: 182px;
          &.ant-calendar-range-picker-input {
            top: -4px;
          }
        }
        ::v-deep .ant-select-selection,
        ::v-deep .ant-select-selection > div,
        ::v-deep .ant-calendar-picker-input.ant-input {
          height: 27px;
          line-height: 27px;
        }
        &.input-li-active {
          ::v-deep .ant-cascader-picker,
          ::v-deep .ant-input {
            color: #4183d9;
            font-weight: inherit;
          }
        }
        ::v-deep .ant-select-selection__placeholder {
          font-weight: normal;
        }
      }
    }
  }
  &.projec-class-input {
    > div {
      flex: 1;
    }
    .projec-class-list {
      width: auto;
    }
  }
  .btn-more {
    display: none;
  }
  &.project-class-more {
    padding-right: 63px;
    position: relative;
    .btn-more {
      display: inline-block;
      position: absolute;
      right: 10px;
      top: 11px;
      padding: 0px 5px;
      cursor: pointer;
      color: #999;
      font-weight: normal;
      &:hover {
        color: #0581ca;
        background-color: #e4e4e4;
        .icon-child-down {
          color: #0581ca;
        }
      }
    }
    ul {
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      overflow: hidden;
      max-height: 700px;
      &.projec-class-list-more {
        max-height: 43px;
      }
    }
  }
}
.trademark-nav {
  background: #fff;
  // border: 1px solid #ededed;
  color: #000;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  overflow: hidden;
  max-height: 700px;
  margin-top: 15px;
  .hoverShow {
    cursor: pointer;
    border-bottom: 2px solid rgba(255, 255, 255, 0);
    &:hover {
      border-bottom: 4px solid #4183d9;
    }
  }
  .clickShow {
    border-bottom: 4px solid #4183d9;
    color: #4183d9;
    cursor: pointer;
  }
  .projec-class-box {
    font-weight: 600;
    // background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    .projec-class-lable {
      width: 120px;
      padding: 10px 0 10px 30px;
      // float: left;
      font-size: 15px;
      text-align: left;
    }
    .projec-class-list {
      width: calc(100% - 120px);
      padding-left: 10px;
      color: rgba(0, 0, 0, 0.65);
      margin: 0;
      //  float: left;
      //  background: #fff;
      display: block;
      position: relative;
      padding: 0;
      list-style: none;
      li {
        float: left;
        padding: 10px 15px;
        &.input-li {
          padding: 7px 5px;
          ::v-deep input,
          ::v-deep .ant-select {
            line-height: 27px;
            height: 27px;
            position: relative;
            top: 2px;
            width: 182px;
            &.ant-calendar-range-picker-input {
              top: -4px;
            }
          }
          ::v-deep .ant-select-selection,
          ::v-deep .ant-select-selection > div,
          ::v-deep .ant-calendar-picker-input.ant-input {
            height: 27px;
            line-height: 27px;
          }
          &.input-li-active {
            ::v-deep .ant-cascader-picker,
            ::v-deep .ant-input {
              color: #4183d9;
              font-weight: inherit;
            }
          }
          ::v-deep .ant-select-selection__placeholder {
            font-weight: normal;
          }
        }
      }
    }
    &.projec-class-input {
      > div {
        flex: 1;
      }
      .projec-class-list {
        width: auto;
      }
    }
    .btn-more {
      display: none;
    }
    &.project-class-more {
      padding-right: 63px;
      position: relative;
      .btn-more {
        display: inline-block;
        position: absolute;
        right: 10px;
        top: 11px;
        padding: 0px 5px;
        cursor: pointer;
        color: #999;
        font-weight: normal;
        &:hover {
          color: #0581ca;
          background-color: #e4e4e4;
          .icon-child-down {
            color: #0581ca;
          }
        }
      }
      ul {
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        overflow: hidden;
        max-height: 700px;
        &.projec-class-list-more {
          max-height: 43px;
        }
      }
    }
  }
  &.trademark-nav-hidden {
    margin-top: 0;
    max-height: 0;
    border: 0;
  }
}
</style>
